<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    .logo {
        width: 30px;
        height: 30px;
        border: 1px solid #DCDCDC;
        border-radius: 50%;
        margin-right: 12px;
        background: #FFFFFF;
        overflow: hidden;
    }
    .mui_comm_ul .mui_comm_li {
        padding-left:20px;
    }
    .mui_comm_ul .mui_comm_li span{
        font-size: 1.2rem;
    }
    .mui_comm_ul{
        padding: 1rem 0 1rem 0;
    }
</style>
<div class="content-list-wrap">
    <div class="mui-content mui-scroll-wrapper" id="contentListWrap">
        <div class="mui-scroll">
            <div class="inner-list">
                <div id="contentList">
                    <script type="text/html" id="tpl-reward">
                        <div>
                            {{each list as value i}}
                            <ul class="mui_comm_ul">
                                <li class="mui_comm_li" data-id="{{value.id}}">
                                    <span>{{i+1}}</span>
                                </li>
                                <li class="mui_comm_li" data-id="{{value.id}}">
                                <img class="logo" src="{{value.head_url}}">
                                </li>
                                <li class="mui_comm_li" data-id="{{value.id}}">
                                <span>{{value.user_name}}</span>
                                </li>
                                <li class="mui_comm_li" data-id="{{value.id}}">
                                    <span>评论时间</span>
                                </li>
                                <li class="mui_comm_li" data-id="{{value.id}}">
                                    <span>{{dataFormat(value.create_time,'yyyy/MM/dd hh:mm')}}</span>
                                </li>
                            </ul>
                            {{/each}}
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    var _textIndex = 1,total_page = 0;
    //上拉加载数据
    function pullUp2Refresh(){
        var _this = this;
        //如果存在数据，则继续添加数据
        if(_textIndex < total_page){
            $.ajax({
                url: _basePath + "/app/community/rewardList",
                data:{
                    id: '${id}',
                    curPage: _textIndex + 1
                },
                dataType : 'json',
                success :function (data) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tplList', data);
                    $("#contentList").append(_html);

                    _textIndex++;

                    //如果存在数据，则继续添加数据
                    if(_textIndex < total_page){
                        _this.endPullupToRefresh(false);
                    }else{
                        _this.endPullupToRefresh(true);
                    }
                }
            });

        }else{
            _this.endPullupToRefresh(true);
        }
    }

    function loadData() {
        $.ajax({
            url: _basePath + "/app/community/rewardList",
            data:{
                id: '${id}'
            },
            dataType : 'json',
            success :function (data) {
                if(undefined != typeof data.resultList && data.resCode == 0) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tpl-reward', data.resultList);
                    $("#contentList").append(_html);
                    initPullUp();
                }else {
                    mui.toast(data['message']);
                }

            }
        });
    }

    $(function () {
        loadData();
    });

    function initPullUp() {
        //初始化上拉加载
        mui.init({
            pullRefresh: {
                container: 'div#contentListWrap',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                up: {
                    height: 50,//可选.默认50.触发上拉加载拖动距离
                    auto: true,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '我是有底线的',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: pullUp2Refresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });
    }
</script>